<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="__ROOT__/Public/Admin/shortcut icon" href="favicon.ico">
    <link href="__ROOT__/Public/Admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/js/plugins/cityPicker/city-picker.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/default.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/official.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/css/animate.css" rel="stylesheet">
    <link href="__ROOT__/Public/Admin/js/cropper/cropper.min.css" rel="stylesheet" />
    <link href="__ROOT__/Public/Admin/js/cropper/sitelogo.css" rel="stylesheet" />

    <script>
        var CC = {
            "PUBLIC":"__PUBLIC__",
            "ROOT":"__ROOT__",
            "APP":"__APP__",
        };
    </script>

    <style>
        .nav-tabs{
            margin-bottom: 20px;
        }
        .err-tip-color{
            color:#ed2a2a;
        }
        #content-main{height: calc(100%) !important;}
        .portrait{position:relative;width:100px;height:100px;display:inline-block;}
        .portrait .album{}
        .portrait .upload-btn{position:absolute;width:100%;height:100%;}
        .portrait .upload-btn button {width: 100%;height: 100%;opacity: 0;cursor:pointer}
        .portrait .upload-img{width:100px;height:100px;overflow:hidden;border:1px solid #ddd;padding:2px;}
        .portrait .upload-img.loading {background:url('__ROOT__/Public/images/loading.gif') no-repeat center;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <form class="form-horizontal m-t js-ajax-forms" id="signupForm" action="{:U('Admin/My/edit')}" method="post" enctype="multipart/form-data">
            <div class="col-sm-8  col-md-offset-2">

                <div class="ibox float-e-margins">

                    <div class="ibox-content">
                        <div class="portrait">
                            <div class="album">
                                <div class="upload-btn">
                                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#avatar-modal">
                                        修改头像
                                    </button>
                                </div>
                                <div class="upload-img ">
                                    <img onerror="javascript:this.src='__ROOT__/data/upload/avatar/default.jpg';" src="__ROOT__/data/upload/avatar/{$User.ID}.jpg" width="100" height="100"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">

                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">姓名 *</label>
                            <div class="col-sm-8">
                                <input id="TrueName" name="TrueName" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error" value="{$User.TrueName}">
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-3 control-label">性别 *</label>
                            <div class="col-sm-8">
                                <select class="form-control m-b" id="Sex" name="Sex" aria-required="true" aria-invalid="true" class="error">
                                    <option value="">请选择用户性别</option>
                                    <foreach name='Sex' item='vo'>
                                        <php> $selected = $User['Sex']==$key?'selected':''; </php>
                                        <option {$selected} value="{$key}">{$vo}</option>
                                    </foreach>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" >
                            <label class="col-sm-3 control-label">出生年月</label>
                            <div class="col-sm-8">
                                <input type="text" id="Birthday" name="Birthday" class="form-control date" value="{$User.Birthday}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">所在城市</label>
                            <div class="col-sm-8">
                                <input id="City" class="form-control" name="City" readonly type="text" data-toggle="city-picker" value="{$User.City}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系地址</label>
                            <div class="col-sm-8">
                                <input id="Address" name="Address" class="form-control" type="text"  value="{$User.Address}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机 *</label>
                            <div class="col-sm-8">
                                <input id="Phone" name="Phone" class="form-control" type="phone" aria-required="true" aria-invalid="true" class="error" value="{$User.Phone}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">E-mail</label>
                            <div class="col-sm-8">
                                <input id="EMail" name="EMail" class="form-control" type="email" value="{$User.EMail}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">身份证号</label>
                            <div class="col-sm-8">
                                <input id="CardNO" name="CardNO" class="form-control" type="text" value="{$User.CardNO}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注</label>
                            <div class="col-sm-8">
                                <textarea id="Remarks" name="Remarks" class="form-control diff-textarea" id="original" rows="6">{$User.Remarks}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button class="btn btn-primary keep" type="submit">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
            <form class="avatar-form">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                            <button class="btn btn-danger"  type="button" style="height: 35px;" onclick="$('input[id=avatarInput]').click();">请选择图片</button>
                            <span id="avatar-name"></span>
                            <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                                <!--<div class="avatar-preview preview-md"></div>
                        <div class="avatar-preview preview-sm"></div>-->
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-4">
                                <div class="btn-group">
                                    <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"> 向左旋转</button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"> 向右旋转</button>
                                </div>
                            </div>
                            <div class="col-md-5" style="text-align: right;">
                                <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
							            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
							            </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
							            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
							              <!--<span class="fa fa-search-plus"></span>-->
							            </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
							            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
							              <!--<span class="fa fa-search-minus"></span>-->
							            </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
								            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214">
                                </button>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
<script>
    var GV = {
        ROOT: "__ROOT__/",
        WEB_ROOT: "__ROOT__/",
        JS_ROOT: "Public/Admin/js/"
    };
</script>
<script type="text/javascript" src="__ROOT__/Public/Admin/js/jquery.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/Admin/js/bootstrap/js/bootstrap.js"></script>

<script type="text/javascript" src="__ROOT__/Public/Admin/js/wind.js"></script>
<script type="text/javascript" src="__ROOT__/Public/Admin/js/common.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/layer/layer.min.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/layer/laydate/laydate.js"></script>
<script type="text/javascript" src="__ROOT__/Public/Admin/js/ajaxForm.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/validate/jquery.validate.min.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/validate/messages_zh.min.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/cityPicker/city-picker.data.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/cityPicker/city-picker.js"></script>
<script src="__ROOT__/Public/Admin/js/plugins/cityPicker/main.js"></script>
<script src="__ROOT__/Public/Admin/js/cropper/cropper.js"></script>
<script src="__ROOT__/Public/Admin/js/cropper/sitelogo.js"></script>
<script src="__ROOT__/Public/Admin/js/cropper/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(document).ready(function(){


        //做个下简易的验证  大小 格式
        $('#avatarInput').on('change', function(e) {
            var filemaxsize = 1024 * 5;//5M
            var target = $(e.target);
            var Size = target[0].files[0].size / 1024;
            if(Size > filemaxsize) {
                alert('图片过大，请重新选择!');
                $(".avatar-wrapper").children().remove;
                return false;
            }
            if(!this.files[0].type.match(/image.*/)) {
                alert('请选择正确的图片!')
            } else {
                var filename = document.querySelector("#avatar-name");
                var texts = document.querySelector("#avatarInput").value;
                var teststr = texts; //你这里的路径写错了
                testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
                filename.innerHTML = testend;
            }

        });

        $(".avatar-save").on("click", function() {
            var img_lg = document.getElementById('imageHead');
            // 截图小的显示框内的内容
            html2canvas(img_lg, {
                allowTaint: true,
                taintTest: false,
                onrendered: function(canvas) {
                    canvas.id = "mycanvas";
                    //生成base64图片数据
                    var dataUrl = canvas.toDataURL("image/jpeg");
                    var newImg = document.createElement("img");
                    newImg.src = dataUrl;
                    imagesAjax(dataUrl);
                    $('.upload-img img').attr('src',dataUrl );
                }
            });
        });
        function imagesAjax(src) {
            var data = {};
            data.avatar = src;
            $.ajax({
                url: "{:U('Admin/My/upload_avatar')}",
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(result) {
                    if(result.state != 'success'){
                        alert(result.info);
                    }
                }
            });
        }

        var Birthday = {
            elem: '#Birthday',
            format: 'YYYY-MM-DD',
            min: '1900-01-01 00:00:00',
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {

            }
        };
        laydate(Birthday);

        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                element.closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement: "span",
            errorPlacement: function (error, element) {
                if (element.is(":radio") || element.is(":checkbox")) {
                    error.appendTo(element.parent().parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            errorClass: "help-block m-b-none",
            validClass: "help-block m-b-none "
        });

        $.validator.addMethod("isPhone", function (value, element) {
            var phone = /^1[34578]\d{9}$/;
            return phone.test(value);
        }, "请输入正确的手机号码");

        var icon = "<i class='fa fa-times-circle'></i> ";
        var form = $('form.js-ajax-forms');
        var formloading = false;

        //表单验证开始
        form.validate({
            //验证规则
            rules: {
                TrueName: "required",
                Sex: {
                    required: true
                },
                CardNO:{
                    rangelength:[15,18]//输入值必须介于 15 和 18 之间。
                },
                Phone: {
                    required: true,
                    maxlength:11,//输入长度最多是 11 的字符串（汉字算一个字符）。
                    minlength: 11
                }
            },
            //验证未通过提示消息
            messages: {
                TrueName:icon + "请输入姓名",
                Sex:icon + "请选择性别",
                CardNO:{
                    minlength: icon + "身份证位数长度有误"
                },
                Phone:{
                    required: icon + "请输入手机号码",
                    minlength: icon + "手机号码格式有误",
                    maxlength: icon + "手机号码格式有误"
                }
            },
            //验证通过，提交表单
            submitHandler: function (forms) {
                if (formloading)
                    return;
                $(forms).ajaxSubmit({
                    url: form.attr('action'), //按钮上是否自定义提交地址(多按钮情况)
                    dataType: 'json',
                    beforeSubmit: function (arr, $form, options) {
                        formloading = true;
                    },
                    success: function (data, statusText, xhr, $form) {
                        formloading = false;
                        if (data.status) {
                            //添加成功
                            swal({
                                        title: "继续编辑？",
                                        text: "操作成功！",
                                        type: "success",
                                    },
                                    function (isConfirm) {
                                        swal.close();
                                    });
                        } else {
                            swal("操作失败", data.info, "error");
                        }
                    }
                });
            }
        });

    });
</script>
</body>
</html>